<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--绝对布局-->
<!--属性：position
值： absolute
设置了绝对定位的元素，相当于该元素被从原文档中删除了
所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下空档-->
<style>
    .p1{
        position: absolute;
        left: 150px;
        top: 50px;
    }
</style>

<p>正常文字1</p>
<p>正常文字2</p>
<p class="p1">正常文字3</p>
<p>正常文字4</p>

<!--绝对定位是基于最近的一个定位了的父容器-->
<style>
    p.abs{
        position: absolute;
        left: 100px;
        top: 50px;
    }
    .absdiv{
        position: absolute;
        left: 150px;
        top: 50px;
        width:215px;
        border: 1px solid blue;
    }
</style>

<div>
    <p >正常文字a</p>
    <p >正常文字b</p>
    <p >正常文字c</p>
    <p >正常文字d</p>
    <p >正常文字e</p>
    <p >正常文字f</p>
    <p >正常文字g</p>
</div>

<div class="absdiv">
    这是一个定位了的div
    <p class="abs" >绝对定位的文字</p>
</div>

<!--如果没有定位了的父容器-->
<style>
    p.abs{
        position: absolute;
        left: 100px;
        top: 50px;
    }

</style>

<div>
    <p >正常文字a</p>
    <p >正常文字b</p>
    <p >正常文字c</p>
    <p >正常文字d</p>
</div>

<div>
    这个div没有定位
    <p class="abs" >绝对定位的文字</p>
</div>

<!--通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。
重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用
z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。-->
<style>
    #d1{
        position: absolute;
    }
    #i1{
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: -1;
    }
</style>

<div id="d1">
    <p>正常文字a</p>
    <p>正常文字a</p>
    <p>正常文字a</p>
    <p>正常文字a</p>
    <p>正常文字a</p>
    <img id="i1" src="https://how2j.cn/example.gif">
</div>
</body>
</html>